<!doctype html>
<html lang="zh-Hans">
	<head>
		<title>欧姆定律计算器 - 嵌入式工具集</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<!-- 引入Tailwind CSS -->
		<script src="https://cdn.tailwindcss.com"></script>
		<!-- 以下为浏览器中的配置，正式 编译之后请注释掉这段-->
		<link rel="stylesheet" href="../styles/styles.css" />
		<!-- 以下为LCEDA中的配置，正式 编译之后请勿注释这段-->
		<link rel="stylesheet" href="/iframe/styles/styles.css" />

		<style>
			/* 特定样式已移至共享CSS文件 */

			/* 欧姆定律图表样式 */
			.ohm-chart .formula-text {
				font-size: 14px;
				font-weight: 500;
				fill: #374151;
			}

			.ohm-chart .center-circle {
				font-size: 16px;
			}

			/* 功率计算器特定样式覆盖 */
			.ohm-calculator .input-label {
				width: 100%;
				text-align: center;
				display: block;
				margin-bottom: 0.5rem;
			}

			/* 确保输入组在不同尺寸下都能正常工作 */
			.ohm-calculator .input-group {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
			}

			/* 优化的结果卡片颜色和渐变 */
			.voltage-card {
				background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
				color: #1e40af;
				box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

			.current-card {
				background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
				color: #065f46;
				box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

			.resistance-card {
				background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
				color: #92400e;
				box-shadow: 0 10px 25px -5px rgba(245, 158, 11, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.3);
			}

			.power-card {
				background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 100%);
				color: #5b21b6;
				box-shadow: 0 10px 25px -5px rgba(139, 92, 246, 0.3);
				border: 1px solid rgba(255, 255, 255, 0.2);
			}

			/* 增强按钮样式 */
			.btn-primary {
				background-color: #0891b2;
				color: white;
				border: none;
				border-radius: 8px;
				padding: 0.75rem;
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				font-weight: 600;
				font-size: 1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
				height: 3.5rem;
			}

			.btn-primary:hover:not(.bg-gray-400) {
				background-color: #0e7490;
				transform: translateY(-2px);
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
			}

			.btn-secondary {
				background-color: #f59e0b;
				color: white;
				border: none;
				border-radius: 8px;
				padding: 0.75rem;
				cursor: pointer;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				font-weight: 600;
				font-size: 1rem;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
				height: 3.5rem;
			}

			.btn-secondary:hover {
				background-color: #d97706;
				transform: translateY(-2px);
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
			}

			/* 美化公式框 */
			.formula-box {
				background-color: #f8fafc;
				border-radius: 12px;
				padding: 1.5rem;
				margin-bottom: 1.5rem;
				font-family: 'SF Pro Text', 'Inter', monospace;
				text-align: center;
				border: 1px solid #e2e8f0;
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
				transition: all 0.3s ease;
			}

			.formula-box:hover {
				box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
				transform: translateY(-1px);
			}

			.formula-title {
				font-weight: 700;
				margin-bottom: 0.75rem;
				color: #374151;
				font-size: 1.1rem;
				letter-spacing: 0.025em;
			}

			.formula-text {
				color: #4b5563;
				font-size: 0.95rem;
				line-height: 1.7;
			}

			/* 优化分组标题样式 */
			.formula-group-title {
				font-weight: 600;
				margin-bottom: 0.5rem;
				color: #374151;
				font-size: 0.9rem;
			}

			/* 优化复选框样式 */
			input[type='checkbox'] {
				accent-color: #3b82f6;
				transform: scale(1.1);
			}

			/* 优化选项悬停效果 */
			.formula-option {
				transition: all 0.2s ease;
			}

			.formula-option:hover {
				background-color: rgba(255, 255, 255, 0.7);
				transform: translateY(-1px);
			}

			/* 优化的结果卡片布局 */
			.result-cards {
				display: grid;
				grid-template-columns: 1fr;
				gap: 1.25rem;
				margin: 2rem 0;
			}

			/* 优化的结果卡片样式 */
			.result-card {
				border-radius: 12px;
				padding: 1.75rem;
				text-align: center;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				color: white;
				position: relative;
				overflow: hidden;
				backdrop-filter: blur(8px);
			}

			/* 卡片悬浮效果 */
			.result-card:hover {
				transform: translateY(-5px) scale(1.03);
				box-shadow:
					0 20px 25px -5px rgba(0, 0, 0, 0.1),
					0 10px 10px -5px rgba(0, 0, 0, 0.04);
			}

			/* 卡片装饰元素 */
			.result-card::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 50%, transparent 55%);
				background-size: 10px 10px;
				opacity: 0.3;
			}

			/* 卡片图标样式 */
			.result-icon {
				font-size: 2rem;
				margin-bottom: 0.75rem;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				transition: transform 0.3s ease;
			}

			.result-card:hover .result-icon {
				transform: scale(1.1);
			}

			/* 卡片标题样式 */
			.result-title {
				font-size: 0.95rem;
				opacity: 0.95;
				margin-bottom: 0.75rem;
				font-weight: 600;
				letter-spacing: 0.025em;
			}

			/* 卡片数值样式 */
			.result-value {
				font-size: 1.75rem;
				font-weight: 700;
				margin-bottom: 0.5rem;
				text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
				font-family: 'SF Pro Text', 'Inter', sans-serif;
				font-weight: 800;
			}

			/* 卡片单位样式 */
			.result-unit {
				font-size: 0.85rem;
				opacity: 0.85;
				font-weight: 500;
			}

			/* 确保在插件环境中的兼容性 */
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
			}

			/* 输入框文本居中显示 */
			.input-field input {
				text-align: center;
			}
		</style>
	</head>
	<body class="bg-gradient-to-br from-light to-blue-50 min-h-screen p-6 font-sans">
		<div class="w-full mx-auto bg-white rounded-2xl shadow-lg p-6 calculator-container ohm-calculator">
			<h2 class="text-2xl font-bold text-primary mb-6 text-center">欧姆定律计算器</h2>

			<div class="formula-box grid grid-cols-2 gap-4">
				<div class="formula-title col-span-full">选择计算公式（每组仅可选择一个）</div>

				<!-- 电压公式组 -->
				<div class="border border-blue-200 rounded-lg bg-blue-50">
					<div class="text-sm font-medium text-blue-700 p-3 border-b border-blue-200 bg-blue-100/50">电压 (V) 计算公式：</div>
					<div class="flex flex-col gap-2 p-3">
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-v-ir" name="voltage-formula" value="ir" class="cursor-pointer" checked />
							<label for="formula-v-ir" class="text-sm cursor-pointer">V = I * R</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-v-pi" name="voltage-formula" value="pi" class="cursor-pointer" />
							<label for="formula-v-pi" class="text-sm cursor-pointer">V = P / I</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-v-sqrtpr" name="voltage-formula" value="sqrt" class="cursor-pointer" />
							<label for="formula-v-sqrtpr" class="text-sm cursor-pointer">V = √(P * R)</label>
						</div>
					</div>
				</div>

				<!-- 电流公式组 -->
				<div class="border border-green-200 rounded-lg bg-green-50">
					<div class="text-sm font-medium text-green-700 p-3 border-b border-green-200 bg-green-100/50">电流 (I) 计算公式：</div>
					<div class="flex flex-col gap-2 p-3">
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-i-vr" name="current-formula" value="vr" class="cursor-pointer" />
							<label for="formula-i-vr" class="text-sm cursor-pointer">I = V / R</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-i-pv" name="current-formula" value="pv" class="cursor-pointer" />
							<label for="formula-i-pv" class="text-sm cursor-pointer">I = P / V</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-i-sqrtpr" name="current-formula" value="sqrt" class="cursor-pointer" />
							<label for="formula-i-sqrtpr" class="text-sm cursor-pointer">I = √(P / R)</label>
						</div>
					</div>
				</div>

				<!-- 电阻公式组 -->
				<div class="border border-yellow-200 rounded-lg bg-yellow-50">
					<div class="text-sm font-medium text-yellow-700 p-3 border-b border-yellow-200 bg-yellow-100/50">电阻 (R) 计算公式：</div>
					<div class="flex flex-col gap-2 p-3">
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-r-vi" name="resistance-formula" value="vi" class="cursor-pointer" />
							<label for="formula-r-vi" class="text-sm cursor-pointer">R = V / I</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-r-pi2" name="resistance-formula" value="pi2" class="cursor-pointer" />
							<label for="formula-r-pi2" class="text-sm cursor-pointer">R = P / I²</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-r-v2p" name="resistance-formula" value="v2p" class="cursor-pointer" />
							<label for="formula-r-v2p" class="text-sm cursor-pointer">R = V² / P</label>
						</div>
					</div>
				</div>

				<!-- 功率公式组 -->
				<div class="border border-purple-200 rounded-lg bg-purple-50">
					<div class="text-sm font-medium text-purple-700 p-3 border-b border-purple-200 bg-purple-100/50">功率 (P) 计算公式：</div>
					<div class="flex flex-col gap-2 p-3">
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-p-vi" name="power-formula" value="vi" class="cursor-pointer" />
							<label for="formula-p-vi" class="text-sm cursor-pointer">P = V * I</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-p-i2r" name="power-formula" value="i2r" class="cursor-pointer" />
							<label for="formula-p-i2r" class="text-sm cursor-pointer">P = I² * R</label>
						</div>
						<div class="flex items-center space-x-2 py-1 px-3 transition-all cursor-pointer">
							<input type="checkbox" id="formula-p-v2r" name="power-formula" value="v2r" class="cursor-pointer" />
							<label for="formula-p-v2r" class="text-sm cursor-pointer">P = V² / R</label>
						</div>
					</div>
				</div>
			</div>

			<!-- 输入区域 -->
			<div class="grid grid-cols-2 gap-6 justify-items-center">
				<div class="input-group">
					<div class="input-label">电压</div>
					<div class="input-field">
						<input type="number" id="voltage" placeholder="请输入电压值" value="3.3" step="0.01" />
						<span class="input-unit">V</span>
					</div>
				</div>

				<div class="input-group">
					<div class="input-label">电流</div>
					<div class="input-field">
						<input type="number" id="current" placeholder="请输入电流值" value="0.001" step="0.0001" />
						<span class="input-unit">A</span>
					</div>
				</div>

				<div class="input-group">
					<div class="input-label">电阻</div>
					<div class="input-field">
						<input type="number" id="resistance" placeholder="请输入电阻值" value="3300" step="0.1" />
						<span class="input-unit">Ω</span>
					</div>
				</div>

				<div class="input-group">
					<div class="input-label">功率</div>
					<div class="input-field">
						<input type="number" id="power" placeholder="请输入功率值" value="0.0033" step="0.0001" />
						<span class="input-unit">W</span>
					</div>
				</div>
			</div>

			<!-- 计算按钮和实时更新复选框 -->
			<div class="flex items-center space-x-3 mt-2">
				<!-- 实时更新选择框 -->
				<div class="flex items-center space-x-2 bg-gray-50 p-3 rounded-lg border border-gray-100">
					<input type="checkbox" id="real-time-update" checked />
					<label for="real-time-update" class="text-sm font-medium text-gray-700 cursor-pointer flex items-center justify-center h-full"
						>实时更新</label
					>
				</div>
				<button onclick="ohmCalculate()" class="btn-primary flex-1"><i class="fa fa-calculator mr-2"></i>计算</button>
				<button id="reset-button" onclick="ohmClear()" class="btn-secondary flex-1"><i class="fa fa-refresh mr-2"></i>重置</button>
			</div>

			<!-- 结果显示区域 -->
			<div class="result-cards">
				<div class="result-card voltage-card">
					<div class="result-icon">⚡</div>
					<div class="result-title">电压</div>
					<div class="result-value" id="display-voltage">3.30</div>
					<div class="result-unit">V</div>
				</div>

				<div class="result-card current-card">
					<div class="result-icon">🔌</div>
					<div class="result-title">电流</div>
					<div class="result-value" id="display-current">0.0010</div>
					<div class="result-unit">A</div>
				</div>

				<div class="result-card resistance-card">
					<div class="result-icon">🛡️</div>
					<div class="result-title">电阻</div>
					<div class="result-value" id="display-resistance">3300.00</div>
					<div class="result-unit">Ω</div>
				</div>

				<div class="result-card power-card">
					<div class="result-icon animate-pulse">💡</div>
					<div class="result-title">功率</div>
					<div class="result-value" id="display-power">0.0033</div>
					<div class="result-unit">W</div>
				</div>
			</div>

			<div id="ohm-result" class="hidden mt-6 p-4 bg-blue-50 rounded-lg text-blue-700 font-medium text-center border border-blue-100"></div>

			<!-- 清空按钮 - 移到提示词下方，默认隐藏 -->
			<div id="clear-button-container" class="mt-4 hidden">
				<button id="clear-button" onclick="ohmEmpty()" class="bg-red-100 border border-red-200 text-red-700 btn-secondary flex-1">
					<i class="fa fa-trash mr-2"></i>清空
				</button>
			</div>
		</div>

		<script>
			// 更新结果并添加动画效果
			function updateResultWithAnimation(elementId, value) {
				const element = document.getElementById(elementId);
				if (!element) return;

				// 添加更明显的过渡效果
				element.style.transition = 'all 0.3s ease-in-out';
				element.style.opacity = '0.5';
				element.style.transform = 'scale(0.95)';

				setTimeout(() => {
					element.textContent = value;
					element.style.opacity = '1';
					element.style.transform = 'scale(1)';
				}, 150);
			}

			// 欧姆定律计算（含功率计算）
			function ohmCalculate() {
				const voltage = parseFloat(document.getElementById('voltage').value);
				const current = parseFloat(document.getElementById('current').value);
				const resistance = parseFloat(document.getElementById('resistance').value);
				const power = parseFloat(document.getElementById('power').value);
				const resultDiv = document.getElementById('ohm-result');

				// 获取用户选中的公式
				const selectedFormulas = getSelectedFormulas();

				// 检查有多少个有效输入值
				let validInputs = 0;
				if (!isNaN(voltage)) validInputs++;
				if (!isNaN(current)) validInputs++;
				if (!isNaN(resistance)) validInputs++;
				if (!isNaN(power)) validInputs++;

				// 隐藏清空按钮
				document.getElementById('clear-button-container').classList.add('hidden');

				// 至少需要两个有效值才能计算
				if (validInputs < 2) {
					resultDiv.textContent = '请至少输入两个值';
					resultDiv.classList.remove('hidden');
					return;
				}

				// 所有四个值都已输入
				if (!isNaN(voltage) && !isNaN(current) && !isNaN(resistance) && !isNaN(power)) {
					resultDiv.textContent = '所有值已输入，请清空至少一个值后重新计算';
					resultDiv.classList.remove('hidden');
					// 显示清空按钮
					document.getElementById('clear-button-container').classList.remove('hidden');
					return;
				}

				// 计算逻辑
				let calculatedVoltage = voltage;
				let calculatedCurrent = current;
				let calculatedResistance = resistance;
				let calculatedPower = power;
				let resultText = '';
				let calculatedSomething = false;

				// 根据用户选择的公式计算结果
				// 电压计算
				if (selectedFormulas.voltage) {
					switch (selectedFormulas.voltage) {
						case 'ir':
							if (!isNaN(current) && !isNaN(resistance)) {
								// 计算电压 (V = I × R)
								calculatedVoltage = current * resistance;
								document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
								resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = I × R)`;
								calculatedSomething = true;
							}
							break;
						case 'pi':
							if (!isNaN(current) && !isNaN(power)) {
								// 计算电压 (V = P / I)
								calculatedVoltage = power / current;
								document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
								resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = P / I)`;
								calculatedSomething = true;
							}
							break;
						case 'sqrt':
							if (!isNaN(resistance) && !isNaN(power)) {
								// 计算电压 (V = √(P × R))
								calculatedVoltage = Math.sqrt(power * resistance);
								document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
								resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = √(P × R))`;
								calculatedSomething = true;
							}
							break;
					}
				}

				// 电流计算
				if (!calculatedSomething && selectedFormulas.current) {
					switch (selectedFormulas.current) {
						case 'vr':
							if (!isNaN(voltage) && !isNaN(resistance)) {
								// 计算电流 (I = V / R)
								calculatedCurrent = voltage / resistance;
								document.getElementById('current').value = calculatedCurrent.toFixed(4);
								resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = V / R)`;
								calculatedSomething = true;
							}
							break;
						case 'pv':
							if (!isNaN(voltage) && !isNaN(power)) {
								// 计算电流 (I = P / V)
								calculatedCurrent = power / voltage;
								document.getElementById('current').value = calculatedCurrent.toFixed(4);
								resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = P / V)`;
								calculatedSomething = true;
							}
							break;
						case 'sqrt':
							if (!isNaN(resistance) && !isNaN(power)) {
								// 计算电流 (I = √(P / R))
								calculatedCurrent = Math.sqrt(power / resistance);
								document.getElementById('current').value = calculatedCurrent.toFixed(4);
								resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = √(P / R))`;
								calculatedSomething = true;
							}
							break;
					}
				}

				// 电阻计算
				if (!calculatedSomething && selectedFormulas.resistance) {
					switch (selectedFormulas.resistance) {
						case 'vi':
							if (!isNaN(voltage) && !isNaN(current)) {
								// 计算电阻 (R = V / I)
								calculatedResistance = voltage / current;
								document.getElementById('resistance').value = calculatedResistance.toFixed(2);
								resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = V / I)`;
								calculatedSomething = true;
							}
							break;
						case 'pi2':
							if (!isNaN(current) && !isNaN(power)) {
								// 计算电阻 (R = P / I²)
								calculatedResistance = power / (current * current);
								document.getElementById('resistance').value = calculatedResistance.toFixed(2);
								resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = P / I²)`;
								calculatedSomething = true;
							}
							break;
						case 'v2p':
							if (!isNaN(voltage) && !isNaN(power)) {
								// 计算电阻 (R = V² / P)
								calculatedResistance = (voltage * voltage) / power;
								document.getElementById('resistance').value = calculatedResistance.toFixed(2);
								resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = V² / P)`;
								calculatedSomething = true;
							}
							break;
					}
				}

				// 功率计算
				if (!calculatedSomething && selectedFormulas.power) {
					switch (selectedFormulas.power) {
						case 'vi':
							if (!isNaN(voltage) && !isNaN(current)) {
								// 计算功率 (P = V × I)
								calculatedPower = voltage * current;
								document.getElementById('power').value = calculatedPower.toFixed(4);
								resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = V × I)`;
								calculatedSomething = true;
							}
							break;
						case 'i2r':
							if (!isNaN(current) && !isNaN(resistance)) {
								// 计算功率 (P = I² × R)
								calculatedPower = current * current * resistance;
								document.getElementById('power').value = calculatedPower.toFixed(4);
								resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = I² × R)`;
								calculatedSomething = true;
							}
							break;
						case 'v2r':
							if (!isNaN(voltage) && !isNaN(resistance)) {
								// 计算功率 (P = V² / R)
								calculatedPower = (voltage * voltage) / resistance;
								document.getElementById('power').value = calculatedPower.toFixed(4);
								resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = V² / R)`;
								calculatedSomething = true;
							}
							break;
					}
				}

				// 如果没有使用选中的公式计算成功，则使用默认计算逻辑
				if (!calculatedSomething) {
					// 默认计算逻辑，添加公式信息
					if (isNaN(voltage) && !isNaN(current) && !isNaN(resistance)) {
						// 计算电压 (V = I × R)
						calculatedVoltage = current * resistance;
						document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
						resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = I × R)`;
					} else if (isNaN(voltage) && !isNaN(current) && !isNaN(power)) {
						// 计算电压 (V = P / I)
						calculatedVoltage = power / current;
						document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
						resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = P / I)`;
					} else if (isNaN(voltage) && !isNaN(resistance) && !isNaN(power)) {
						// 计算电压 (V = √(P × R))
						calculatedVoltage = Math.sqrt(power * resistance);
						document.getElementById('voltage').value = calculatedVoltage.toFixed(2);
						resultText = `计算结果：电压 = ${calculatedVoltage.toFixed(2)} V (使用公式: V = √(P × R))`;
					} else if (isNaN(current) && !isNaN(voltage) && !isNaN(resistance)) {
						// 计算电流 (I = V / R)
						calculatedCurrent = voltage / resistance;
						document.getElementById('current').value = calculatedCurrent.toFixed(4);
						resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = V / R)`;
					} else if (isNaN(current) && !isNaN(voltage) && !isNaN(power)) {
						// 计算电流 (I = P / V)
						calculatedCurrent = power / voltage;
						document.getElementById('current').value = calculatedCurrent.toFixed(4);
						resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = P / V)`;
					} else if (isNaN(current) && !isNaN(resistance) && !isNaN(power)) {
						// 计算电流 (I = √(P / R))
						calculatedCurrent = Math.sqrt(power / resistance);
						document.getElementById('current').value = calculatedCurrent.toFixed(4);
						resultText = `计算结果：电流 = ${calculatedCurrent.toFixed(4)} A (使用公式: I = √(P / R))`;
					} else if (isNaN(resistance) && !isNaN(voltage) && !isNaN(current)) {
						// 计算电阻 (R = V / I)
						calculatedResistance = voltage / current;
						document.getElementById('resistance').value = calculatedResistance.toFixed(2);
						resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = V / I)`;
					} else if (isNaN(resistance) && !isNaN(voltage) && !isNaN(power)) {
						// 计算电阻 (R = V² / P)
						calculatedResistance = (voltage * voltage) / power;
						document.getElementById('resistance').value = calculatedResistance.toFixed(2);
						resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = V² / P)`;
					} else if (isNaN(resistance) && !isNaN(current) && !isNaN(power)) {
						// 计算电阻 (R = P / I²)
						calculatedResistance = power / (current * current);
						document.getElementById('resistance').value = calculatedResistance.toFixed(2);
						resultText = `计算结果：电阻 = ${calculatedResistance.toFixed(2)} Ω (使用公式: R = P / I²)`;
					} else if (isNaN(power) && !isNaN(voltage) && !isNaN(current)) {
						// 计算功率 (P = V × I)
						calculatedPower = voltage * current;
						document.getElementById('power').value = calculatedPower.toFixed(4);
						resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = V × I)`;
					} else if (isNaN(power) && !isNaN(voltage) && !isNaN(resistance)) {
						// 计算功率 (P = V² / R)
						calculatedPower = (voltage * voltage) / resistance;
						document.getElementById('power').value = calculatedPower.toFixed(4);
						resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = V² / R)`;
					} else if (isNaN(power) && !isNaN(current) && !isNaN(resistance)) {
						// 计算功率 (P = I² × R)
						calculatedPower = current * current * resistance;
						document.getElementById('power').value = calculatedPower.toFixed(4);
						resultText = `计算结果：功率 = ${calculatedPower.toFixed(4)} W (使用公式: P = I² × R)`;
					}
				}

				// 更新显示值
				updateResultWithAnimation('display-voltage', !isNaN(calculatedVoltage) ? calculatedVoltage.toFixed(2) : '0');
				updateResultWithAnimation('display-current', !isNaN(calculatedCurrent) ? calculatedCurrent.toFixed(4) : '0');
				updateResultWithAnimation('display-resistance', !isNaN(calculatedResistance) ? calculatedResistance.toFixed(2) : '0');
				updateResultWithAnimation('display-power', !isNaN(calculatedPower) ? calculatedPower.toFixed(4) : '0');

				// 添加图标动画效果
				const powerIcon = document.querySelector('.power-card .result-icon');
				if (!isNaN(calculatedPower)) {
					powerIcon.classList.remove('animate-pulse');
					void powerIcon.offsetWidth; // 重置动画
					powerIcon.classList.add('animate-pulse');
				}

				resultDiv.textContent = resultText;
				resultDiv.classList.remove('hidden');
			}

			function ohmClear() {
				// 获取当前选中的公式和需要的输入参数
				const selectedFormulas = getSelectedFormulas();
				const requiredInputs = new Set();
				const formulaInputs = {
					voltage: {
						ir: ['current', 'resistance'],
						pi: ['current', 'power'],
						sqrt: ['resistance', 'power'],
					},
					current: {
						vr: ['voltage', 'resistance'],
						pv: ['voltage', 'power'],
						sqrt: ['resistance', 'power'],
					},
					resistance: {
						vi: ['voltage', 'current'],
						pi2: ['current', 'power'],
						v2p: ['voltage', 'power'],
					},
					power: {
						vi: ['voltage', 'current'],
						i2r: ['current', 'resistance'],
						v2r: ['voltage', 'resistance'],
					},
				};

				// 确定当前显示的输入框
				Object.entries(selectedFormulas).forEach(([type, formula]) => {
					if (formulaInputs[type] && formulaInputs[type][formula]) {
						formulaInputs[type][formula].forEach((input) => {
							requiredInputs.add(input);
						});
					}
				});

				// 重置默认值映射
				const defaultValues = {
					voltage: '3.30',
					current: '0.001',
					resistance: '3300.00',
					power: '0.0033',
				};

				// 保存实时更新复选框的当前状态
				const realTimeUpdateState = document.getElementById('real-time-update').checked;

				// 重置显示的输入框
				if (requiredInputs.size > 0) {
					// 如果有选中的公式，只重置显示的输入框
					requiredInputs.forEach((inputType) => {
						document.getElementById(inputType).value = defaultValues[inputType];
					});
				} else {
					// 如果没有选中的公式，重置所有输入框（保持原有行为）
					document.getElementById('voltage').value = '3.30';
					document.getElementById('current').value = '0.001';
					document.getElementById('resistance').value = '3300.00';
					document.getElementById('power').value = '0.0033';
				}

				document.getElementById('ohm-result').classList.add('hidden');
				// 隐藏清空按钮
				document.getElementById('clear-button-container').classList.add('hidden');

				// 更新显示值
				if (requiredInputs.size > 0) {
					// 只更新需要显示的输出值
					Object.keys(selectedFormulas).forEach((outputType) => {
						const resultId = 'display-' + outputType;
						if (document.getElementById(resultId)) {
							// 这里保持原有的默认值显示，实际计算会在ohmCalculate中更新
							updateResultWithAnimation(resultId, defaultValues[outputType]);
						}
					});
				} else {
					// 如果没有选中的公式，更新所有显示值
					updateResultWithAnimation('display-voltage', '3.30');
					updateResultWithAnimation('display-current', '0.0010');
					updateResultWithAnimation('display-resistance', '3300.00');
					updateResultWithAnimation('display-power', '0.0033');
				}

				// 执行一次计算以确保显示正确的计算结果
				if (requiredInputs.size > 0) {
					ohmCalculate();
				}

				// 恢复实时更新复选框的状态
				document.getElementById('real-time-update').checked = realTimeUpdateState;
				// 更新计算按钮状态以匹配实时更新复选框
				const calculateButton = document.querySelector('button[onclick="ohmCalculate()"]');
				if (realTimeUpdateState) {
					calculateButton.disabled = true;
					calculateButton.classList.add('opacity-50', 'cursor-not-allowed');
				} else {
					calculateButton.disabled = false;
					calculateButton.classList.remove('opacity-50', 'cursor-not-allowed');
				}
			}

			function ohmEmpty() {
				// 清空所有输入框
				document.getElementById('voltage').value = '';
				document.getElementById('current').value = '';
				document.getElementById('resistance').value = '';
				document.getElementById('power').value = '';
				document.getElementById('ohm-result').classList.add('hidden');
				// 隐藏清空按钮
				document.getElementById('clear-button-container').classList.add('hidden');

				// 更新所有显示值
				updateResultWithAnimation('display-voltage', '0.00');
				updateResultWithAnimation('display-current', '0.0000');
				updateResultWithAnimation('display-resistance', '0.00');
				updateResultWithAnimation('display-power', '0.0000');

				// 清空按钮不需要恢复操作
			}

			// 根据选中的公式调整输入框和输出卡片的显示
			function adjustInputsAndOutputsByFormulas() {
				// 获取所有选中的公式
				const selectedFormulas = getSelectedFormulas();

				// 定义每个公式需要的输入参数
				const formulaInputs = {
					// 电压公式
					voltage: {
						ir: ['current', 'resistance'], // V = I * R 需要 I 和 R
						pi: ['current', 'power'], // V = P / I 需要 P 和 I
						sqrt: ['resistance', 'power'], // V = √(P * R) 需要 P 和 R
					},
					// 电流公式
					current: {
						vr: ['voltage', 'resistance'], // I = V / R 需要 V 和 R
						pv: ['voltage', 'power'], // I = P / V 需要 P 和 V
						sqrt: ['resistance', 'power'], // I = √(P / R) 需要 P 和 R
					},
					// 电阻公式
					resistance: {
						vi: ['voltage', 'current'], // R = V / I 需要 V 和 I
						pi2: ['current', 'power'], // R = P / I² 需要 P 和 I
						v2p: ['voltage', 'power'], // R = V² / P 需要 V 和 P
					},
					// 功率公式
					power: {
						vi: ['voltage', 'current'], // P = V * I 需要 V 和 I
						i2r: ['current', 'resistance'], // P = I² * R 需要 I 和 R
						v2r: ['voltage', 'resistance'], // P = V² / R 需要 V 和 R
					},
				};

				// 如果没有选中任何公式，显示所有输入框和输出卡片
				if (Object.keys(selectedFormulas).length === 0) {
					document.querySelectorAll('.input-group').forEach((group) => {
						group.style.display = 'block';
					});
					document.querySelectorAll('.result-card').forEach((card) => {
						card.style.display = 'block';
					});
					return;
				}

				// 确定需要显示的输入框和输出卡片
				const requiredInputs = new Set();
				const resultOutputs = new Set();

				// 遍历所有选中的公式
				Object.entries(selectedFormulas).forEach(([type, formula]) => {
					// 添加需要输出的物理量
					resultOutputs.add(type);

					// 添加需要的输入参数
					if (formulaInputs[type] && formulaInputs[type][formula]) {
						formulaInputs[type][formula].forEach((input) => {
							requiredInputs.add(input);
						});
					}
				});

				// 调整输入框显示
				['voltage', 'current', 'resistance', 'power'].forEach((type) => {
					const inputGroup = document.querySelector(`.input-group:has(#${type})`);
					if (inputGroup) {
						if (requiredInputs.has(type)) {
							inputGroup.style.display = 'block';
						} else {
							inputGroup.style.display = 'none';
							// 清空被隐藏的输入框
							document.getElementById(type).value = '';
						}
					}
				});

				// 调整输出卡片显示
				[
					{ type: 'voltage', cardClass: 'voltage-card', resultId: 'display-voltage' },
					{ type: 'current', cardClass: 'current-card', resultId: 'display-current' },
					{ type: 'resistance', cardClass: 'resistance-card', resultId: 'display-resistance' },
					{ type: 'power', cardClass: 'power-card', resultId: 'display-power' },
				].forEach(({ type, cardClass, resultId }) => {
					const resultCard = document.querySelector(`.result-card.${cardClass}`);
					if (resultCard) {
						resultCard.style.display = resultOutputs.has(type) ? 'block' : 'none';
					}
				});
			}

			// 添加公式复选框单选功能
			function setupFormulaCheckboxes() {
				// 所有公式组
				const formulaGroups = ['voltage-formula', 'current-formula', 'resistance-formula', 'power-formula'];

				formulaGroups.forEach((group) => {
					const checkboxes = document.querySelectorAll(`input[name="${group}"]`);
					checkboxes.forEach((checkbox) => {
						checkbox.addEventListener('change', function () {
							if (this.checked) {
								// 取消同组其他复选框的选中状态
								checkboxes.forEach((cb) => {
									if (cb !== this) cb.checked = false;
								});

								// 取消其他所有公式组中的复选框选中状态
								formulaGroups.forEach((otherGroup) => {
									if (otherGroup !== group) {
										const otherCheckboxes = document.querySelectorAll(`input[name="${otherGroup}"]`);
										otherCheckboxes.forEach((cb) => {
											cb.checked = false;
										});
									}
								});
							} else {
								// 检查是否还有其他复选框被选中
								let hasOtherChecked = false;
								formulaGroups.forEach((g) => {
									const otherCheckboxes = document.querySelectorAll(`input[name="${g}"]:checked`);
									if (otherCheckboxes.length > 0) {
										hasOtherChecked = true;
									}
								});

								// 如果没有其他复选框被选中，则阻止取消勾选当前复选框
								if (!hasOtherChecked) {
									this.checked = true;
								}
							}

							// 根据选中的公式调整输入框和输出卡片
							adjustInputsAndOutputsByFormulas();

							// 只有在启用了实时更新时，才在公式切换时自动更新输出值
							if (document.getElementById('real-time-update').checked) {
								ohmCalculate();
							}
						});
					});
				});
			}

			// 获取当前选中的公式
			function getSelectedFormulas() {
				const formulas = {};
				const formulaGroups = ['voltage-formula', 'current-formula', 'resistance-formula', 'power-formula'];

				formulaGroups.forEach((group) => {
					const selected = document.querySelector(`input[name="${group}"]:checked`);
					if (selected) {
						formulas[group.split('-')[0]] = selected.value;
					}
				});

				return formulas;
			}

			// 添加实时计算事件监听
			document.addEventListener('DOMContentLoaded', function () {
				// 设置公式复选框单选功能
				setupFormulaCheckboxes();

				// 初始化显示状态
				adjustInputsAndOutputsByFormulas();

				// 获取实时更新复选框和计算按钮
				const realTimeCheckbox = document.getElementById('real-time-update');
				const calculateButton = document.querySelector('button[onclick="ohmCalculate()"]');

				// 更新按钮状态的函数
				function updateButtonState() {
					calculateButton.disabled = realTimeCheckbox.checked;
					if (realTimeCheckbox.checked) {
						calculateButton.classList.add('opacity-50', 'cursor-not-allowed');
					} else {
						calculateButton.classList.remove('opacity-50', 'cursor-not-allowed');
					}
				}

				// 为复选框添加事件监听器
				realTimeCheckbox.addEventListener('change', function () {
					if (this.checked) {
						// 启用实时更新 - 添加事件监听器
						addRealTimeListeners();
						// 立即计算一次，以更新显示
						ohmCalculate();
					} else {
						// 禁用实时更新 - 移除事件监听器
						removeRealTimeListeners();
					}
					// 更新按钮状态
					updateButtonState();
				});

				// 初始化按钮状态
				updateButtonState();

				// 由于实时更新默认选中，立即添加实时更新事件监听器
				addRealTimeListeners();

				// 初始计算一次
				ohmCalculate();
			});

			// 添加实时更新事件监听器
			function addRealTimeListeners() {
				document.getElementById('voltage').addEventListener('input', ohmCalculate);
				document.getElementById('current').addEventListener('input', ohmCalculate);
				document.getElementById('resistance').addEventListener('input', ohmCalculate);
				document.getElementById('power').addEventListener('input', ohmCalculate);
			}

			// 移除实时更新事件监听器
			function removeRealTimeListeners() {
				document.getElementById('voltage').removeEventListener('input', ohmCalculate);
				document.getElementById('current').removeEventListener('input', ohmCalculate);
				document.getElementById('resistance').removeEventListener('input', ohmCalculate);
				document.getElementById('power').removeEventListener('input', ohmCalculate);
			}

			// 暴露给父页面的接口
			window.ohmCalculate = ohmCalculate;
			window.ohmClear = ohmClear;
		</script>

		<!-- 欧姆定律圆形图表 -->
		<div class="my-8">
			<div class="ohm-chart-container">
				<h3 class="ohm-chart-title">欧姆定律公式图表</h3>
				<div class="max-w-xs mx-auto">
					<svg width="300" height="300" viewBox="0 0 300 300" class="ohm-chart rounded-full border-2 border-gray-200">
						<!-- 外圆 -->
						<circle cx="150" cy="150" r="140" fill="white" stroke="#374151" stroke-width="2" />

						<!-- 内圆 (外圆的一半大小) -->
						<circle cx="150" cy="150" r="70" fill="#f3f4f6" stroke="#9ca3af" stroke-width="1" />

						<!-- 直角坐标系组 -->
						<g>
							<!-- 原始坐标系 -->
							<!-- X轴 -->
							<line x1="10" y1="150" x2="290" y2="150" stroke="#374151" stroke-width="2" />
							<!-- Y轴 -->
							<line x1="150" y1="10" x2="150" y2="290" stroke="#374151" stroke-width="2" />

							<!-- 旋转30°的坐标系 -->
							<g transform="rotate(30, 150, 150)">
								<line x1="10" y1="150" x2="290" y2="150" stroke="#374151" stroke-width="2" stroke-opacity="0.6" />
								<line x1="150" y1="10" x2="150" y2="290" stroke="#374151" stroke-width="2" stroke-opacity="0.6" />
							</g>

							<!-- 旋转60°的坐标系 -->
							<g transform="rotate(60, 150, 150)">
								<line x1="10" y1="150" x2="290" y2="150" stroke="#374151" stroke-width="2" stroke-opacity="0.6" />
								<line x1="150" y1="10" x2="150" y2="290" stroke="#374151" stroke-width="2" stroke-opacity="0.6" />
							</g>
						</g>

						<!-- 外圆12分区编号 - 调整到各区块中间 -->
						<g class="sector-numbers">
							<!-- 第1区 - 调整到坐标(180,45) - 显示公式I * R -->
							<foreignObject x="170" y="35" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">I * R</div>
							</foreignObject>
							<!-- 第2区 - 45度位置 - 显示公式P / I -->
							<foreignObject x="220" y="60" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">P / I</div>
							</foreignObject>
							<!-- 第3区 - 15度位置 - 显示公式√(P * R) -->
							<foreignObject x="225" y="120" width="45" height="20">
								<div
									class="formula-text"
									xmlns="http://www.w3.org/1999/xhtml"
									style="text-align: center; font-size: 11px; white-space: nowrap; line-height: 20px"
								>
									√(P * R)
								</div>
							</foreignObject>
							<!-- 第4区 - 345度位置 - 显示公式V / I -->
							<foreignObject x="237" y="170" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">V / I</div>
							</foreignObject>
							<!-- 第5区 - 315度位置 - 显示公式P / I² -->
							<foreignObject x="222" y="220" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">
									P / I²
								</div>
							</foreignObject>
							<!-- 第6区 - 285度位置 - 显示公式V² / P -->
							<foreignObject x="165" y="245" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">
									V² / P
								</div>
							</foreignObject>
							<!-- 第7区 - 255度位置 - 显示公式V / R -->
							<foreignObject x="115" y="245" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">V / R</div>
							</foreignObject>
							<!-- 第8区 - 225度位置 - 显示公式P / V -->
							<foreignObject x="58" y="220" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">P / V</div>
							</foreignObject>
							<!-- 第9区 - 195度位置 - 显示公式√(P / R) -->
							<foreignObject x="25" y="170" width="45" height="20">
								<div
									class="formula-text"
									xmlns="http://www.w3.org/1999/xhtml"
									style="text-align: center; font-size: 11px; white-space: nowrap; line-height: 20px"
								>
									√(P / R)
								</div>
							</foreignObject>
							<!-- 第10区 - 165度位置 - 显示公式I² * R -->
							<foreignObject x="30" y="120" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">
									I² * R
								</div>
							</foreignObject>
							<!-- 第11区 - 135度位置 - 显示公式V * I -->
							<foreignObject x="58" y="60" width="30" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">V * I</div>
							</foreignObject>
							<!-- 第12区 - 105度位置 - 显示公式V² / R -->
							<foreignObject x="100" y="35" width="40" height="30">
								<div class="formula-text" xmlns="http://www.w3.org/1999/xhtml" style="text-align: center; font-size: 11px">
									V² / R
								</div>
							</foreignObject>
						</g>

						<!-- 外圆区域 -->

						<!-- 四个物理量在内圆的四个象限，按象限轮廓形状调整 -->
						<!-- 第一象限 (右上) - V - 四分之一圆 -->
						<g class="center-circle">
							<path d="M150,150 L150,80 A70,70 0 0,1 220,150 Z" fill="#60a5fa" />
							<text x="185" y="115" text-anchor="middle" fill="white" font-weight="bold" dy="0.3em">V</text>
							<text x="185" y="130" text-anchor="middle" fill="white" font-size="8">Volts</text>
						</g>

						<!-- 第二象限 (左上) - P - 四分之一圆 -->
						<g class="center-circle">
							<path d="M150,150 L150,80 A70,70 0 0,0 80,150 Z" fill="#f87171" />
							<text x="115" y="115" text-anchor="middle" fill="white" font-weight="bold" dy="0.3em">P</text>
							<text x="115" y="130" text-anchor="middle" fill="white" font-size="8">Watts</text>
						</g>

						<!-- 第三象限 (左下) - I - 四分之一圆 -->
						<g class="center-circle">
							<path d="M150,150 L80,150 A70,70 0 0,0 150,220 Z" fill="#4ade80" />
							<text x="115" y="185" text-anchor="middle" fill="white" font-weight="bold" dy="0.3em">I</text>
							<text x="115" y="200" text-anchor="middle" fill="white" font-size="8">Amps</text>
						</g>

						<!-- 第四象限 (右下) - R - 四分之一圆 -->
						<g class="center-circle">
							<path d="M150,150 L220,150 A70,70 0 0,1 150,220 Z" fill="#c084fc" />
							<text x="185" y="185" text-anchor="middle" fill="white" font-weight="bold" dy="0.3em">R</text>
							<text x="185" y="200" text-anchor="middle" fill="white" font-size="8">ohms</text>
						</g>

						<!-- 中心圆 - 欧姆定律 -->
						<circle cx="150" cy="150" r="30" fill="#6b7280" />
						<text x="150" y="145" text-anchor="middle" fill="white" font-size="12">欧姆定律</text>
						<text x="150" y="160" text-anchor="middle" fill="white" font-size="12">Ohm's Law</text>
					</svg>
				</div>
			</div>
		</div>

		<!-- 页脚 -->
		<footer class="w-full mx-auto mt-6 text-center text-sm text-gray-500">
			<p>版本号: V0.0.1-20251004</p>
		</footer>
	</body>
</html>
